<template>
    <section class="recommend-list-box bgcFFF pdlr15">
      <div class="" v-for="(item,index) in newData" :key="index">
        <!--展现形式1-->
        <div class="type-1 line-bottom paddingtb" v-if="item.type == 1" @click="handleClick(item.id)">
          <div class="type-1-left fll pr">
            <p class="fs16 clamp2 title">{{item.title}}</p>
            <p class="pa timer">{{item.time}}</p>
          </div>
          <div class="type-1-right flr">
            <img :src="item.src" alt="新闻图片">
          </div>
        </div>
        <!--展现形式1-->

        <!--展现形式2-->
        <div class="type-2 line-bottom paddingtb" v-if="item.type == 2" @click="handleClick(item.id)">
          <p class="fs16 clamp2 title">{{item.title}}</p>
          <p>
            <img :src="item.src" alt="新闻图片">
          </p>
          <p class="timer">
            {{item.time}}
          </p>
        </div>
        <!--展现形式2-->

        <!--展现形式3-->
        <div class="type-3 line-bottom paddingtb" v-if="item.type == 3">
          <p class="fs16 clamp2 title">{{item.title}}</p>
          <p>
            <img v-for="(img,index) in item.src" :src="img" alt="新闻图片" @click="handleClick(item.id)">
          </p>
          <p class="timer">
            {{item.time}}
          </p>
        </div>
        <!--展现形式3-->
      </div>

    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    },
    props:['newData'],
    methods: {
      handleClick(id){
        this.$emit('new-id',{id:id})
      }
    },
  }
</script>

<style scoped lang="scss">
  @import '../assets/css/base';


  .recommend-list-box{
    width: 100%;
    height: auto;

    .timer{
      font-size: 11px;
      color: #999AA3;
    }

    .paddingtb{
      padding:12px 0;
      box-sizing: border-box;
    }

    .title{
      line-height: 24px;
    }

    img{
      border-radius: 3px;
    }

    //*****展现形式1*****
    .type-1{
      height: 110px;
      width: 100%;

      .type-1-left{
        width: calc(100% - 113px);
        height: 100%;

        p:nth-child(2){
          bottom: 0;
          left: 0;
        }
      }

      .type-1-right{
        width: 113px;

        img{
          width: 113px;
          height: 85px;
        }
      }

    }
    //*****展现形式1*****

    //*****展现形式2*****
    .type-2{
      width: 100%;
      height: auto;

      p:nth-child(2){
        margin:10px 0;
        img{
          width: 100%;
          height: 173px;
        }

      }

    }
    //*****展现形式2*****

    //*****展现形式3*****
    .type-3{
      width: 100%;
      height:auto;

      p:nth-child(2){
        margin: 10px 0;

        img{
          width: calc(100% / 3 - 3.5px);
        }
      }

    }
    //*****展现形式3*****
  }
</style>
